<template>
  <div class="box">
    <div class="top">
      <el-select v-model="value" placeholder="发布类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @click="val"
        />
      </el-select>
      <el-select v-model="province" placeholder="选择省" @change="handleProvinceChange">
        <el-option
          v-for="item in provinces"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="city" placeholder="选择市" @change="handleCityChange">
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="area" placeholder="选择区">
        <el-option
          v-for="item in areas"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <button class="btn">查询</button>
    </div>
    <div class="bottom">
      <div class="btntop">
        <div class="btntop">
          <el-button
            type="primary"
            v-for="(item, index) in showStatusData"
            :key="index"
            @click="showStatus(item)"
            :class="{ active: item === currentStatus1 }"
          >
            {{ item }}</el-button
          >
        </div>
      </div>
      <div class="btncenter">
        <el-table :data="filteredData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="50" />
          <el-table-column prop="name" label="用户名" width="80" />
          <el-table-column prop="phone" label="手机号" width="120" />
          <el-table-column prop="communityName" label="小区名称" width="100" />
          <el-table-column prop="address" label="地址" width="150" />
          <el-table-column prop="area" label="面积" width="100" />
          <el-table-column prop="image" label="房产证图片" width="100">
            <template #default="img">
              <img :src="img.row.image" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" />
          <el-table-column prop="type" label="发布类型" width="100" />
          <el-table-column label="审核">
            <template #default="{ row }">
              <span v-if="row.status === '待审核'">
                <el-button type="primary" @click="passAudit(row)">审核通过</el-button>
                <el-button type="primary" @click="rejectAudit(row)">审核不通过</el-button>
                <el-button type="primary" @click="detail(row)">详情</el-button>
              </span>
              <span v-else>
                <el-button type="primary" @click="detail(row)">详情</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          v-model="centerDialogVisible"
          title="审核不通过原因"
          width="30%"
          align-center
        >
          <span>
            <el-input
              v-model="textarea1"
              autosize
              type="textarea"
              placeholder="审核不通过原因"
            />
          </span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="() => queren(row)"> 确认 </el-button>
            </span>
          </template>
        </el-dialog>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import list from "../utils/mock.js";
import axios from "axios";
const currentStatus1 = ref("");
onMounted(() => {
  fetchData();
});
const showStatusData = ["待审核", "审核通过", "审核不通过"];
const currentStatus = ref("");
const currentPage = ref(1); // 当前页数
const pageSize = ref(5); // 每页条数
const total = ref(100); // 总条数
const tableData = ref([...list]);
const value = ref("");
const province = ref("");
const city = ref("");
const area = ref("");
const textarea1 = ref("");
const centerDialogVisible = ref(false);
const selectedRow = ref(null);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  // 重新请求数据
  fetchData();
};
const Datavalue = ref([]);
const Datavalue1 = ref(tableData.value);
const Datavalue2 = ref(tableData.value);
const val = () => {
  if (value.value === "我想找个房") {
    console.log("我想找个房");
    
    Datavalue.value = Datavalue2.value.filter(
      (item: { type: string }) => item.type === value.value
    );
    tableData.value = Datavalue.value;
  } else if(value.value === "二手房出售"){
    Datavalue.value = Datavalue2.value.filter(
      (item: { type: string }) => item.type === value.value
    );
    tableData.value = Datavalue.value;
  }  else if(value.value === "有房出租"){
    Datavalue.value = Datavalue2.value.filter(
      (item: { type: string }) => item.type === value.value
    );
    tableData.value = Datavalue.value;
  }  else if(value.value === "我想租个房"){
    Datavalue.value = Datavalue2.value.filter(
      (item: { type: string }) => item.type === value.value
    );
    tableData.value = Datavalue.value;
  }  else if(value.value === "帮我找房"){
    Datavalue.value = Datavalue2.value.filter(
      (item: { type: string }) => item.type === value.value
    );
    tableData.value = Datavalue.value;
  }
};

const filteredData = computed(() => {
  if (currentStatus.value) {
    return tableData.value.filter(
      (item: { status: string }) => item.status === currentStatus.value
    );
  } else                                                         {
    return tableData.value;
  }
});


const provinces = [
  { value: "p1", label: "河南" },
  { value: "p2", label: "北京" },
  // 其他省份数据
];

const cities = ref([]);
const areas = ref([]);

const handleProvinceChange = () => {
  // 根据选中的省份获取对应的城市数据，这里假设是根据省份设置的静态数据
  if (province.value === "p1") {
    cities.value = [
      { value: "c11", label: "郑州" },
      { value: "c12", label: "濮阳" },
      // 其他城市数据
    ];
    console.log(cities.value);
  } else if (province.value === "p2") {
    cities.value = [
      { value: "c21", label: "海淀" },
      { value: "c22", label: "顺义" },
      // 其他城市数据
    ];
    console.log(cities.value);
  }
  city.value = ""; // 重置选择的城市
  area.value = ""; // 重置选择的区域
};

const handleCityChange = () => {
  // 根据选中的城市获取对应的区域数据，这里同样假设是根据城市设置的静态数据
  if (city.value === "c11") {
    areas.value = [
      { value: "a111", label: "郑州市" },
      { value: "a112", label: "濮阳市" },
      // 其他区域数据
    ];
  } else if (city.value === "c12") {
    areas.value = [
      { value: "a121", label: "上地市" },
      { value: "a122", label: "顺义市" },
      // 其他区域数据
    ];
  }
  area.value = ""; // 重置选择的区域
};

// 处理当前页变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  // 重新请求数据
  fetchData();
};
// 请求数据的方法
const fetchData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  tableData.value = list.slice(start, end);
};

const options = [
  {
    value: "二手房出售",
    label: "二手房出售",
  },
  {
    value: "有房出租",
    label: "有房出租",
  },
  {
    value: "我想找个房",
    label: "我想找个房",
  },
  {
    value: "我想租个房",
    label: "我想租个房",
  },
  {
    value: "帮我找房",
    label: "帮我找房",
  },
];

const showStatus = (status: string) => {
  currentStatus.value = status;
  currentStatus1.value = status;
  // 生成新数组
  console.log(status);
};


// 审核通过
const passAudit = (row: { Audit: string; status: string }) => {
  row.Audit = "审核通过";
  console.log(row.status);
  row.status = "审核通过";
};

// 审核不通过
const rejectAudit = (row: { Audit: string; status: any }) => {
  row.Audit = "审核不通过";
  console.log(row.status);
  centerDialogVisible.value = true;
};
//审核不通过确认
const queren = (row: any) => {
  // row.status = "审核不通过";
  // console.log(textarea1.value);
  // centerDialogVisible.value = false;
  console.log(selectedRow.value);

  if (selectedRow.value) {
    selectedRow.value.status = "审核不通过";
    centerDialogVisible.value = false;
  }
};

const detail = (row: { Audit: string }) => {
  row.Audit = "详情";
  console.log(row);
};


//确认事件
// const verify = (row) => {
//   centerDialogVisible.value = false;
// };
</script>
<style scoped lang="scss">
.btn {
  width: 100px;
  height: 2rem;
  background: #169bd5;
  border: 0px;
  color: #fff;
}

.box {
  width: 100%;
  height: 100%;
}

.top {
  width: 100%;
  height: 3rem;
}
.bottom {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .btntop {
    width: 100%;
    height: 2rem;
  }
  .btncenter {
    width: 100%;
    flex: 1;
  }
  button {
    width: 100px;
    height: 2rem;
  }
}

.active {
  background: #ccc;
  border: 0px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
